<template>
<z-modal
    title="详情"
    v-bind="modalOption"
    @cancel="handleCancel"
    :footer="false"
    :width="600"
    :bodyStyle="{'padding':'0px','padding-bottom':'100px'}"
  >
  <a-tabs tab-position="left" >
    <a-tab-pane key="1" tab="属性">
      <a-descriptions :column="1">
        <a-descriptions-item label="文件名">
          {{row.name}}
        </a-descriptions-item>
        <a-descriptions-item label="文件类型">
          {{row.type}}
        </a-descriptions-item>
        <a-descriptions-item label="当前包含">
          {{row.children?row.children.length +' 项':'无'}}
        </a-descriptions-item>
        <a-descriptions-item label="大小">
          {{row.size}}
        </a-descriptions-item>
        <a-descriptions-item label="创建时间">
          {{row.createdTime}}
        </a-descriptions-item>
        <a-descriptions-item label="修改时间">
          {{row.updateTime}}
        </a-descriptions-item>
        <a-descriptions-item label="创建者">
          {{row.created}}
        </a-descriptions-item>
        <a-descriptions-item label="修改者">
          {{row.update}}
        </a-descriptions-item>
      </a-descriptions>
    </a-tab-pane>
    <a-tab-pane key="2" tab="版本" >
      <div style="margin-top: 10px;">
        <div style="display:flex;">
          <div style="width:60%;color:#62c8f5;">探析中小企业会计准则的适用范围界定.pdf</div>
          <div style="color:#a19e9e;">12MB</div>
        </div>
        <div style="display:flex;margin-top: 15px;">
          <div style="width:60%;">版本：<span style="color:#62c8f5;">V4</span></div>
          <div>创建日期：<span style="color:#62c8f5;">2023-10-10 09:22</span></div>
        </div>
      </div>
      <a-divider style="margin:12px 0px;" />
      <div >
        <div style="display:flex;">
          <div style="width:60%;color:#62c8f5;">探析中小企业会计准则的适用范围界定.pdf</div>
          <div style="color:#a19e9e;">12MB</div>
        </div>
        <div style="display:flex;margin-top: 15px;">
          <div style="width:60%;">版本：<span style="color:#62c8f5;">V3</span></div>
          <div>创建日期：<span style="color:#62c8f5;">2023-10-10 08:10</span></div>
        </div>
      </div>
      <a-divider style="margin:12px 0px;" />
      <div >
        <div style="display:flex;">
          <div style="width:60%;color:#62c8f5;">探析中小企业会计准则的适用范围界定.pdf</div>
          <div style="color:#a19e9e;">12MB</div>
        </div>
        <div style="display:flex;margin-top: 15px;">
          <div style="width:60%;">版本：<span style="color:#62c8f5;">V2</span></div>
          <div>创建日期：<span style="color:#62c8f5;">2023-10-10 08:00</span></div>
        </div>
      </div>
      <a-divider style="margin:12px 0px;" />
      <div >
        <div style="display:flex;">
          <div style="width:60%;color:#62c8f5;">探析中小企业会计准则的适用范围界定.pdf</div>
          <div style="color:#a19e9e;">12MB</div>
        </div>
        <div style="display:flex;margin-top: 15px;">
          <div style="width:60%;">版本：<span style="color:#62c8f5;">V1</span></div>
          <div>创建日期：<span style="color:#62c8f5;">2023-10-09 20:00</span></div>
        </div>
      </div>
    </a-tab-pane>
  </a-tabs>

</z-modal>
</template>

<script>
import ModalMixins from '@/mixins/ModalMixins'
import { Descriptions as ADescriptions } from 'ant-design-vue'
export default {
  mixins: [ModalMixins],
  components: {
    ADescriptions,
    ADescriptionsItem: ADescriptions.Item
  },
  data() {
    return {
      row: {}
    }
  },
  methods: {
    show(row) {
      console.log('-----', row)
      this.visible = true
      this.row = row
    }
  }
}
</script>

<style>

</style>
